<template>
  <div class="all-box">
    <div class="all">
      <h2>全部分类</h2>
      <ul>
        <li v-for="all in newall" :key="all.id">
          <img :src="all.img" alt />
          <p>
            <span
              class="iconfont"
              :class="all.iconName"
              :style="all.color"
            ></span>
            {{ all.name }}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import getlink from "../../apis/getapi";
export default {
  data() {
    return {
      newall: [],
    };
  },
  created() {
    getlink("/data/one").then((ok) => {
      //   console.log(ok);
      this.newall = ok.data.alls;
      // console.log(this.nav);
    });
  },
};
</script>

<style scoped>
.all-box {
  widows: 100%;
  height: 2.15rem;
  background-color: #ffe9b8;
}
.all {
  width: 100%;
  height: 100%;
  background-color: white;
  border-top-left-radius: 0.12rem;
  border-top-right-radius: 0.12rem;
}
h2 {
  width: 100%;
  height: 0.56rem;
  padding: 0.23rem 0 0.16rem 0.12rem;
  box-sizing: border-box;
  font-size: 0.16rem;
}
.all-box ul {
  width: 100%;
  height: 1.35rem;
  display: flex;
  overflow: auto;
  white-space: nowrap;
}
.all-box ul li {
  width: 1rem;
  height: 100%;
  margin-left: 0.12rem;
}
.all-box ul li img {
  width: 1rem;
  height: 1rem;
  border-radius: 0.12rem;
  margin-bottom: 0.09rem;
}
.all-box ul li p {
  width: 100%;
  text-align: center;
  font-size: 0.14rem;
}
.all-box ul li p .iconfont {
  font-size: 0.14rem;
}
</style>